var myMessages = ['info','warning','error']; // define the messages types	
var messageShown;

function initialize()
{
messageShown=new Array();

		 for (i=0; i<myMessages.length; i++)
		 {
			 messageShown[i]=0;
		 }
}



function isShown(index){
	var ret=0;
	ret=messageShown[index];
	return ret;
}

function setShown(index,value){
	messageShown[index]=value;
}


	 
function hideAllMessages()
{
		 var messagesHeights = new Array(); // this array will store height for each
	 
		 for (i=0; i<myMessages.length; i++)
		 {
				  messagesHeights[i] = $('.' + myMessages[i]).outerHeight();
				  $('.' + myMessages[i]).css('bottom', -messagesHeights[i]); //move element outside viewport	  
		 }
}

function showMessage(type)
{
	$('.'+ type +'-trigger').click(function(){
		  hideAllMessages();				  
		  $('.'+type).animate({bottom:"0"}, 500);
	});
}

$(document).ready(function(){
		 
		 // Initially, hide them all
		
		 hideAllMessages();
		 initialize();
		 
		 // Show message
		 for(var i=0;i<myMessages.length;i++)
		 {
			showMessage(myMessages[i]);
		 }
		 
		 // When message is clicked, hide it

		 $('#info').click(function(){			  
				  $(this).animate({bottom: -$(this).outerHeight()}, 500);
				  setShown(0,1);
		  });	
 		$('#error').click(function(){			  
				  $(this).animate({bottom: -$(this).outerHeight()}, 500);
				  setShown(2,1);
		  });		
		 $('#warning').click(function(){			  
				  $(this).animate({bottom: -$(this).outerHeight()}, 500);
				  setShown(1,1);
		  });			 
		 
});    
